<template>
  <div>
    <div class="main">
      <el-tabs type="border-card">
        <el-tab-pane v-for="list in Lists" :key="list.id" :label="list.name">
          <div height="100px">
            <h2>{{list.name}}</h2>
            <el-col :span="8" v-for="item in Items" :key="item.id">
              <el-card :body-style="{ padding: '2px',margin:'0 4px' }">
                <div style="padding: 6px">
                  <a class="bottom clearfix" style="margin-left:130px">
                    <h4>{{item.category}}</h4>
                    <p>{{item.name}}</p>
                    <img :src="item.thumbnail" alt />
                    <span> {{item.introduction}} </span>
                  </a>
                </div>
              </el-card>
            </el-col>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import categoryApi from "@/api/category.js";
import videoApi from "@/api/video.js"
export default {
  data() {
    return {
      Lists: [
        { id: "1", name: "ok" },
        { id: "2", name: "2" },
        { id: "3", name: "hhf" },
        { id: "4", name: "4" },
        { id: "5", name: "5" },
        { id: "6", name: "6" },
        { id: "7", name: "7" },
        { id: "8", name: "8" },
        { id: "9", name: "8" },
        { id: "10", name: "8" },
        { id: "11", name: "8" },
        { id: "12", name: "8" },
        { id: "13", name: "8" },
        { id: "14", name: "8" }
      ],
      Items:[
        { id: "1", category: "sports", name: "zjf" ,introduction:"are you ok",thumbnail:"ok"},
        { id: "2", category: "news", name: "zzl" ,introduction:"i'm fine",thumbnail:"no"},
        { id: "3", category: "tv", name: "lxw" ,introduction:"thanks",thumbnail:"yes"},
      ]

    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      categoryApi.list().then(response => {
          const res = response.data;
          this.Lists = res.data;
          this.id=res.data.data.id;
          videoApi.listByCategory(id).then(response => {
            const res = response.data;
            this.Items = res.data;
          });
      });
    }
  }
};
</script>

<style scoped>
.main {
  position: absolute;
  width: 80%;
  /* background: url("../../../assets/manager.jpg") no-repeat center center; */
  right: 0px;
  bottom: 0px;
  overflow-y: auto;
  left: 10%;
  top: 160px;
}
.el-card{
  width: 300px;
}
.border-card {
  /* background: url("../../../assets/manager.jpg") no-repeat center center; */
  /* background-color: rgb(255, 255, 255, 0.1); */
  overflow-y: auto;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>